Loading...

تعريف SCSS

SCSS هي صيغة حديثة من لغة Sass، تُستخدم لتوسيع إمكانيات CSS من خلال مجموعة من الميزات المتقدمة التي تُسهّل كتابة الأنماط وتُحسّن تنظيمها.
تُكتب بصياغة مشابهة لـ CSS، مما يجعلها سهلة التعلّم، وتُعد في الوقت نفسه:

أبرز ميزات SCSS

لماذا يُفضّل استخدام SCSS؟


أدوات مهمة للعمل بـ SCSS

Prepros: برنامج يحوّل SCSS إلى CSS تلقائيًا، مع إعادة تحميل مباشر للمتصفح. سهل الاستخدام

Live Sass Compiler: إضافة لـ VS Code تتيح ترجمة SCSS إلى CSS داخل المحرر مباشرة، مع تحديث فوري عند كل تعديل


Css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.styled-button {
    background-color: #4CAF50; /* لون الخلفية */
    border: none;
    color: white; /* لون النص */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* حواف دائرية */
    transition: background-color 0.3s ease; /* تأثير انتقال سلس */
}

.styled-button:hover {
    background-color: #45a049; /* لون الخلفية عند التمرير */
}

نتيجة الكود

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.styled-button {
    background-color: #4CAF50; /* لون الخلفية */
    border: none;
    color: white; /* لون النص */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px; /* حواف دائرية */
    transition: background-color 0.3s ease; /* تأثير انتقال سلس */
}

.styled-button:hover {
    background-color: #45a049; /* لون الخلفية عند التمرير */

شرح الكود

شرح اخر تجريبي